<template>
  <!-- <div class="font-settings-panel p-4 bg-base-200 rounded-lg shadow-lg">
    <h2 class="text-lg font-bold mb-4">字体大小设置</h2> -->
  <!--  <div class=""-->
  <div class="modal-content modal-main">
    <div class="modal-header">
      <h3>设置</h3>
      <button class="close-btn" @click="$emit('close')">&times;</button>
    </div>
    <div class="modal-body">
      <!-- 采样设置 -->
      <div class="setting-group mb-4">
        <h3 class="text-md font-semibold mb-2">采样</h3>
        <div class="grid grid-cols-2 gap-2 mt-2">
          <div class="setting-label">采样点数:</div>
          <div class="setting-control">
            <input
              type="number"
              v-model="tempSamplePoints"
              @change="
                fontSettingsStore.updateSamplePoints(Number(tempSamplePoints))
              "
              class="input input-sm input-bordered w-full"
              step="1"
            />
          </div>
        </div>
      </div>
      <!-- 绘图线条设置 -->
      <div class="setting-group mb-4">
        <h3 class="text-md font-semibold mb-2">绘图线条设置</h3>
        <div class="grid grid-cols-2 gap-2">
          <div class="setting-label">绘图线条类型:</div>
          <div class="flex items-center gap-4">
            <label class="flex items-center">
              <input
                type="radio"
                value="curve"
                v-model="tempLineType"
                class="mr-1"
              />
              平滑曲线
            </label>
            <label class="flex items-center">
              <input
                type="radio"
                value="line"
                v-model="tempLineType"
                class="mr-1"
              />
              折线
            </label>
          </div>
        </div>
      </div>

      <!-- 字体大小设置 -->
      <div class="setting-group mb-4">
        <h3 class="text-md font-semibold mb-2">字体大小设置</h3>
      </div>
      <!-- 左侧边栏字体设置 -->
      <div class="setting-group mb-4">
        <h3 class="text-md font-semibold mb-2">左侧边栏</h3>
        <div class="grid grid-cols-2 gap-2">
          <div class="setting-label">参数列表字体大小:</div>
          <div class="setting-control">
            <input
              type="number"
              v-model="tempFontSettings.sidebar.parameterList"
              @change="validateFontSize('sidebar.parameterList')"
              class="input input-sm input-bordered w-full"
              min="10"
              max="20"
            />
          </div>
        </div>
      </div>

      <!-- 数据查看器字体设置 -->
      <div class="setting-group mb-4">
        <h3 class="text-md font-semibold mb-2">数据查看器</h3>
        <div class="grid grid-cols-2 gap-2">
          <div class="setting-label">游标标签字体大小:</div>
          <div class="setting-control">
            <input
              type="number"
              v-model="tempFontSettings.dataViewer.cursorLabel"
              @change="validateFontSize('dataViewer.cursorLabel')"
              class="input input-sm input-bordered w-full"
              min="10"
              max="20"
            />
          </div>
        </div>
      </div>

      <!-- 参数值显示字体设置 -->
      <div class="setting-group mb-4">
        <h3 class="text-md font-semibold mb-2">参数值及测量结果表格</h3>
        <div class="grid grid-cols-2 gap-2">
          <div class="setting-label">表头字体大小:</div>
          <div class="setting-control">
            <input
              type="number"
              v-model="tempFontSettings.parameterValueDisplay.tableHeader"
              @change="validateFontSize('parameterValueDisplay.tableHeader')"
              class="input input-sm input-bordered w-full"
              min="10"
              max="20"
            />
          </div>

          <div class="setting-label">表格内容字体大小:</div>
          <div class="setting-control">
            <input
              type="number"
              v-model="tempFontSettings.parameterValueDisplay.tableContent"
              @change="validateFontSize('parameterValueDisplay.tableContent')"
              class="input input-sm input-bordered w-full"
              min="10"
              max="20"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="modal-footer flex justify-end gap-2">
      <button @click="resetToDefault" class="tech-btn tech-btn-warn btn-sm">
        恢复默认
      </button>
      <button @click="saveFontSettings" class="tech-btn">保存</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, onMounted, nextTick, watch } from "vue";
import {
  useFontSettingsStore,
  type FontSizeSettings,
} from "@/stores/fontSettings";

// 定义组件emit事件
const emit = defineEmits(["close"]);

// 使用字体设置store
const fontSettingsStore = useFontSettingsStore();

// 获取字体设置的响应式引用
const fontSettings = computed(() => fontSettingsStore.fontSizes);

// 创建临时字体设置对象
const tempFontSettings = ref<FontSizeSettings>({ ...fontSettings.value });

// 添加临时线条类型设置，默认为平滑曲线
const tempLineType = ref<string>("curve");

// 添加临时采样点数设置，默认为500
const tempSamplePoints = ref<number>(500);

// 组件挂载时初始化临时设置
onMounted(() => {
  tempFontSettings.value = JSON.parse(JSON.stringify(fontSettings.value));
  // 从 store 获取当前线条类型，如果没有则默认为平滑曲线
  tempLineType.value = fontSettingsStore.lineType || "curve";
  // 从 store 获取当前采样点数，如果没有则默认为500
  tempSamplePoints.value = fontSettingsStore.samplePoints || 500;
});

// 保存字体设置
function saveFontSettings() {
  // 保存前验证所有字段
  validateFontSize("sidebar.parameterList");
  validateFontSize("dataViewer.cursorLabel");
  validateFontSize("parameterValueDisplay.tableHeader");
  validateFontSize("parameterValueDisplay.tableContent");

  // 保存线条类型设置到 store
  fontSettingsStore.updateLineType(tempLineType.value);

  // 保存采样点数设置到 store
  fontSettingsStore.updateSamplePoints(tempSamplePoints.value);

  // 手动保存每个字段
  // 左侧边栏
  fontSettingsStore.updateFontSize(
    "sidebar.parameterList",
    Number(tempFontSettings.value.sidebar.parameterList)
  );

  // 数据查看器
  fontSettingsStore.updateFontSize(
    "dataViewer.cursorLabel",
    Number(tempFontSettings.value.dataViewer.cursorLabel)
  );

  // 参数值显示
  fontSettingsStore.updateFontSize(
    "parameterValueDisplay.tableHeader",
    Number(tempFontSettings.value.parameterValueDisplay.tableHeader)
  );
  fontSettingsStore.updateFontSize(
    "parameterValueDisplay.tableContent",
    Number(tempFontSettings.value.parameterValueDisplay.tableContent)
  );

  // 关闭设置面板
  emit("close");
}

// 重置为默认值
function resetToDefault() {
  // 先重置store中的值
  fontSettingsStore.resetToDefault();

  // 确保获取最新的默认值
  nextTick(() => {
    // 深拷贝更新后的默认值到临时设置
    tempFontSettings.value = JSON.parse(
      JSON.stringify(fontSettingsStore.fontSizes)
    );
    // 重置线条类型为默认值
    tempLineType.value = "curve";
    // 重置采样点数为默认值
    tempSamplePoints.value = 500;
    // 确保CSS变量已更新
    fontSettingsStore.updateCSSVariables();
  });
}

// 添加验证函数
function validateFontSize(field: string) {
  // 解析路径，获取当前输入框的值
  const keys = field.split(".");
  let target: any = tempFontSettings.value;

  // 遍历路径直到最后一个键
  for (let i = 0; i < keys.length - 1; i++) {
    target = target[keys[i]];
  }

  // 获取字段的当前值
  const lastKey = keys[keys.length - 1];
  let value = Number(target[lastKey]);

  // 确保值在10-20之间，仅在change事件触发时执行（用户完成输入后）
  if (isNaN(value) || value < 10) {
    value = 10;
    target[lastKey] = value;
  } else if (value > 20) {
    value = 20;
    target[lastKey] = value;
  }
}
</script>

<style scoped>
@import "../../src/assets/css/theme.css";
@import "../../src/assets/css/modal.css";
.modal-header {
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: var(--text-color);
}

.modal-content {
  width: 40%;
}
.modal-body {
  padding: 16px 24px;
  overflow-y: auto;
  max-height: calc(90vh - 130px); /* 减去header和footer的高度 */
}

.modal-footer {
  padding: 10px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.mr-1 {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border-color-base);
  outline: none;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s ease, background-color 0.2s ease,
    box-shadow 0.2s ease;
  will-change: transform, border-color, background-color, box-shadow;
  transform: translateZ(0);
  backface-visibility: hidden;
  vertical-align: middle;
  margin: 2px;
}

.mr-1:checked {
  background-color: var(--ant-checkbox-checked);
  border: 1px solid var(--btn-click-color);
  box-shadow: var(--ant-checkbox-shadow);
}

.mr-1:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--global-color-white);
  display: block;
}
.input {
  background: var(--select-background);
  color: var(--text-color);
  border: 1px solid var(--input-border-color);
}

.close-btn {
  background: transparent;
  border: none;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  color: var(--text-color);
  padding: 0;
  /* transition: color 0.3s; */
}

.close-btn:hover {
  color: rgba(0, 0, 0, 0.85);
}
.setting-group {
  border-bottom: 1px solid var(--modal-divide);
  padding-bottom: 1rem;
}

.setting-group:last-child {
  border-bottom: none;
}

.setting-label {
  display: flex;
  align-items: center;
}

.font-settings-panel {
  max-width: 500px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
  .setting-group {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
}
</style>
